<template>
  <!-- 人员管理 -->
  <div class="body personnelManage">
    <div class="titleBox">
      <img src="../../assets/personnelManage.png" alt="" class="titlebg" />
      <p class="title">人员管理</p>
    </div>
    <div class="main" @click="$emit('personnelFun', true)">
      <div id="ChartBar" class="myChart"></div>
    </div>
  </div>
</template>

<script>
import api from "@/util/api";
export default {
  name: "personnelManage",
  data() {
    return {
      msg: "personnelManage",
      barOptions: {
        color: ["#4E7EDD","#C55A45"],
        grid: {
          left: "0%",
          top: "20%",
          width: '280',
          height: "160",
          containLabel: true,
        },
        legend: {
          top: "5%",
          data: ["登记人数", "场内人数"],
          orient: "vertical", //垂直显示
          x: "right", //居右显示
          align: "left",
          itemWidth: 6,
          itemHeight: 6,
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            fontSize: 11,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          axisLabel: {
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        series: [],
      },
    };
  },
  mounted() {
    this.persionIndexShow();
    // this.drawBar();
  },
  methods: {
    drawBar() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("ChartBar"));
      // 绘制图表
      // this.pieOptions.series[0].data = this.pieData;
      myChart.setOption(this.barOptions);
    },
    /** API */
    //  大屏展示数据:展示各单位人员数量（总量及在场人数）
    persionIndexShow(){
      let data1 = [];
      api.persionIndexShow({}, res=>{
        this.barOptions.series[0] = {
          name: "登记人数",
          type: "bar",
          // stack: "total",
          barWidth: 20, //柱图宽度
          data: res.data.data.persionAllCount,
        };
        this.barOptions.series[1] = {
          name: "场内人数",
          type: "bar",
          // stack: "total",
          barWidth: 20,
          data: res.data.data.persionInCount,
        };
        // res.data.data.enterpriseName.map(item=>{
        //   data1.push(item.replace(/工程/, ""));
        // })
        this.barOptions.xAxis.data = res.data.data.enterpriseName;
        this.drawBar();
      })
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.personnelManage {
  width: 100%;
  height: 100%;
  color: #fff;
}
.body {
  .titleBox {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #5d96ed;
    position: relative;
    .titlebg {
      height: 60px;
      position: absolute;
    }
    .title {
      position: absolute;
      z-index: 1;
      top: 16px;
      left: 60px;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 62px);
    padding: 20px;
    box-sizing: border-box;
    .myChart {
      height: 100%;
      color: #fff;
    }
  }
}
</style>
